<template>
  <!-- 新增form -->
  <div>
    <el-form
      :rules="rules"
      ref="seditForm"
      :model="spojo"
      label-width="100px"
      label-position="right"
    >
      <el-form-item label="设备名称：" prop="tName">
        <!-- autocomplete="off"为 保存之前填过的值 -->
        <el-input v-model="spojo.tName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备编号：" prop="tSerialNumber">
        <el-input v-model="spojo.tSerialNumber" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="备注：" prop="tRemarks">
        <el-input type="textarea" v-model="spojo.tRemarks" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import deviceApi from "@/api/device";

export default {
  name: "add-new",
  props: {
    addnewData: {
      type: Object
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      spojo: {
        tName: "",
        tSerialNumber: "",
        tRemarks: ""
      },
      ischange: null,
      rules: {
        // 校验规则
        tName: [
          { required: true, message: "设备名称不能为空", trigger: "blur" }
        ],
        tSerialNumber: [
          { required: true, message: "设备编号不能为空", trigger: "blur" }
        ]
      }
    };
  },

  watch: {
    isEdit: {
      immediate: true,
      handler(val) {
        this.ischange = val;
      }
    },
    addnewData: {
      immediate: true,
      handler(val) {
        this.spojo = val;
      }
    }
  },

  mounted() {
    this.$emit("update:addnewData", this.spojo);
    this.cancelFieldValidate("seditForm");
  },

  methods: {
    // 子组件校验表单
    validateForm() {
      this.$refs["seditForm"].validate(valid => {
        if (valid) {
          // 提交表单
          if (this.ischange) {
            console.log(JSON.stringify(this.spojo));
            deviceApi.updateDevice(this.spojo).then(resp => {
              if (resp.data.flag) {
                // 新增成功，刷新列表数据
                this.$message({
                  message: "修改设备成功",
                  type: "success"
                });
                // 调用父组件的查询方法，刷新数据
                this.$emit("fselect");
                // 关闭
                this.$emit("close");
              } else {
                // 失败
                this.$message({
                  message: "修改设备失败",
                  type: "warning"
                });
              }
            });
          } else {
            console.log(JSON.stringify(this.spojo));
            deviceApi.insertDevice(this.spojo).then(resp => {
              if (resp.data.flag) {
                // 新增成功，刷新列表数据
                this.$message({
                  message: this.isEdit ? "修改设备成功" : "新增设备成功",
                  type: "success"
                });
                // 调用父组件的查询方法，刷新数据
                this.$emit("fselect");
                // 关闭
                this.$emit("close");
              } else {
                // 失败
                this.$message({
                  message: this.isEdit ? "修改设备失败" : "新增设备失败",
                  type: "warning"
                });
              }
            });
          }
        } else {
          this.$message({
            message: "提交表单失败",
            type: "warning"
          });
          return false;
        }
      });
    },
    cancelFieldValidate(formName) {
      this.$refs[formName].clearValidate();
    }
  }
};
</script>